<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="检验开始日期" prop="inspectionBegins">
        <el-date-picker
          clearable
          v-model="queryParams.inspectionBegins"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择巡检开始日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="检验结束日期" prop="inspectionEnddate">
        <el-date-picker
          clearable
          v-model="queryParams.inspectionEnddate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择巡检结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="产线" prop="lineIds">
        <el-select
          v-model="queryParams.lineIds"
          placeholder="请选择产线"
          clearable
          style="width: 100%;"
        >
          <el-option
            v-for="dict in lineList"
            :key="dict.lineId"
            :label="dict.lineName"
            :value="dict.lineId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工单编号" prop="workorderCode">
        <el-input
          v-model="queryParams.workorderCode"
          placeholder="请输入工单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品名称" prop="productName">
        <el-input
          v-model="queryParams.productName"
          placeholder="请输入产品名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品规格" prop="productSpec">
        <el-input
          v-model="queryParams.productSpec"
          placeholder="请输入产品规格"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户" prop="remark">
        <el-input
          v-model="queryParams.remark"
          placeholder="请输入客户"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="合同号" prop="fText4">
        <el-input
          v-model="queryParams.fText4"
          placeholder="请输入合同号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="技术分解单号" prop="fText1">
        <el-input
          v-model="queryParams.fText1"
          placeholder="请输入技术分解单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否合格" prop="checkResult">
        <el-select
          v-model="queryParams.checkResult"
          placeholder="请选择是否合格"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in checkResultOptions"
            :key="index"
            :label="item.label"
            :value="`${item.value}`"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="ipqcList">
      <el-table-column type="index" label="序号" align="center" width="50" />
      <el-table-column label="产线" align="center" prop="lineName" />
      <el-table-column label="检验日期" align="center" prop="checkTime" />
      <el-table-column label="工单编号" align="center" prop="workorderCode" />
      <el-table-column label="产品名称" align="center" prop="productName" />
      <el-table-column label="产品规格" align="center" prop="productSpec" />
      <el-table-column label="客户" align="center" prop="remark" />
      <el-table-column label="合同号" align="center" prop="ftext4" />
      <el-table-column label="技术分解单号" align="center" prop="ftext1" />
      <el-table-column label="巡检数量" align="center" prop="counts" />
      <!-- <el-table-column
        label="检验单编号"
        align="center"
        prop="inspectionCode"
      /> -->
      <!-- <el-table-column label="检验员" align="center" prop="checkUser" /> -->
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="details(true, scope.row)"
            >日报表</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <daily-report v-if="dailyReport" ref="dailyReport"></daily-report>
  </div>
</template>

<script>
import dailyReport from "./dailyReport.vue";
import { productionlineList, getData,tableExport } from "@/api/mes/qc/qcipqc";
import { blobValidate } from "@/utils/hici";
import { Message, Loading } from "element-ui";
import { saveAs } from "file-saver";
let downloadLoadingInstance;
export default {
  name: "ipqc",
  data() {
    return {
      total:0,
      //查询参数
      queryParams: {
        pageNum:1,
        pageSize: 10,
        inspectionBegins: "",
        inspectionEnddate: "",
        lineIds: null,
        workorderCode: null,
        productName: null,
        productSpec: null,
        remark: null,
        fText4: null,
        fText1: null
      },
      //展示用的产线列表
      productionLine: [],
      //保存的产线列表
      lineList: [],
      // 遮罩层
      loading: false,
      // 表格数据
      ipqcList: [],
      //日报表
      dailyReport: false,
      //新增是否合格数据
      checkResultOptions:[
        {label: "是",value:1},{label: "否",value:0},
      ]
    };
  },
  components: {
    dailyReport,
  },
  created() {
    this.getlineList();
  },
  methods: {
    handleExport(){
      downloadLoadingInstance = Loading.service({
        text: "正在下载数据，请稍候",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      tableExport(this.queryParams).then(async data => {
          const isBlob = blobValidate(data);
          if (isBlob) {
            const blob = new Blob([data]);
            saveAs(blob, `ipqc巡检列表.xlsx`);
          } else {
            const resText = await data.text();
            const rspObj = JSON.parse(resText);
            const errMsg =
              errorCode[rspObj.code] || rspObj.msg || errorCode["default"];
            Message.error(errMsg);
          }
          downloadLoadingInstance.close();
      }) .catch(r => {
        console.error(r);
        Message.error("下载文件出现错误，请联系管理员！");
        downloadLoadingInstance.close();
      });
    },
    //获取产线列表
    getlineList() {
      productionlineList().then((res) => {
        console.log(res, "产线列表res");
        if (res.code == 200) {
          this.lineList = res.data;
          this.getList();
        }
      });
    },
    //请求数据
    getList() {
      let param = this.queryParams;
      getData(param).then((res) => {
        console.log(res, "请求数据的res");
        if (res.code == 200) {
          this.total = res.total;
          this.ipqcList = res.rows;
        }
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.pageNum = 1;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 发起审核
    handleUpdate() {},
    //查看日报表
    details(isEdit, row) {
      this.dailyReport = true;
      this.$nextTick(() => {
        this.$refs.dailyReport.init(isEdit, row);
      });
    },
  },
};
</script>
